<template>
	<view class="contact">
	<image src="../../static/bg.jpeg"></image>
	<view class="info">
	<view @click="methods.call">联系电话：{{data.phoneNumber}}（点击拨打）</view>
	<view>地址：地球亚洲中国云南</view>
	</view>
	
	<map :longitude="data.longitude" :latitude="data.latitude" :scale="data.scale" :markers="data.marker"></map>
	</view>
</template>

<script setup>
import { reactive } from "vue";

const data = reactive({
	phoneNumber:'19523350103',
	longitude:119.477605, // 经度
	latitude:29.231203,  // 纬度
	scale:17,						// 缩放级别
	marker:[ 						// 标记点
		{
			content:'黄大仙前端道观',
			longitude:119.477605, // 经度
			latitude:29.231203,  // 纬度
			iconPath:'../../static/marker.jpg',
			height:30,
			width:30
		}
	]
})

const methods = {
	// 拨打电话
	call(){
		uni.makePhoneCall({ 
			phoneNumber:data.phoneNumber,
		})
	}
}
</script>

<style lang="scss">
image{
	width: 750rpx;
}
.info{
	padding: 10rpx 20rpx;
	view{
		line-height: 80rpx;
		border-bottom: 1px solid #eee;
	}
}
map{
	width: 750rpx;
	height: 750rpx;
}
</style>
